<template>
  <div class="content">
    <dc-header :page-to="backUrl" :icon="'icon-header-back'" :title="'记账方式选择'"></dc-header>
    <div class="head-top">
      <dc-row @click.native="chooseThis(1)" class="big-card bg-white text-left" type="flex" justify="space-between"
              align="middle">
        <dc-col span="6">
          <img width="100%" :src="'../../static/icon-account-sim.png'">
        </dc-col>
        <dc-col span="18">
          <div class="big-card-title">简易版</div>
          <div class="big-card-info">对月变动成本和固定成本进行概括性记录，简单便捷，适用于对精度要求不高的成本和保本线估算</div>
        </dc-col>
        <span v-if="accountMode === 1" class="select-label"><i
          class="iconfont icon-account-mode-selected green"></i></span>
      </dc-row>
      <dc-row @click.native="chooseThis(2)" class="big-card bg-white text-left" type="flex" justify="space-between"
              align="middle">
        <dc-col span="6">
          <img width="100%" :src="'../../static/icon-account-pro.png'">
        </dc-col>
        <dc-col span="18">
          <div class="big-card-title">专业版</div>
          <div class="big-card-info">可支持单次、摊销、按月固定支出/收入等多种记账方式，灵活且精细，适用于对账务精确度要求较高的餐饮企业</div>
        </dc-col>
        <span v-if="accountMode === 2" class="select-label"><i
          class="iconfont icon-account-mode-selected green"></i></span>
      </dc-row>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import api from '@/common/api/account';
  import mintUi from '@/common/mintUi';
  export default {
    data () {
      return {
        accountMode: 1,
        backUrl: ''
      };
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    },
    methods: {
      chooseThis (num) {
        this.accountMode = num;
        api.updateAccountMethod({accountMode: this.accountMode}).then(res => {
          mintUi.openToast('切换成功!');
        });
      }
    },
    created () {
      if (this.$route.params.type) {
        this.accountMode = parseInt(this.$route.params.type);
      }
      if (this.$route.params.code) {
        this.backUrl = '/accountSet/' + this.$route.params.code;
      };
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .big-card {
    margin: px2rem(20px);
    border-radius: px2rem(8px);
    padding: px2rem(36px) px2rem(40px);
    position: relative;
    .big-card-title {
      font-size: px2rem(32px);
      color: #333;
      font-weight: bold;
    }
    .big-card-info {
      font-size: px2rem(26px);
      color: #777777;
      margin-top: px2rem(10px);
    }
    .select-label {
      position: absolute;
      right: 0;
      top: 0;
      i {
        font-size: px2rem(72px);
        line-height: 1;
      }
    }
  }
</style>
